<template>
  <div>
    <header>
      <el-image
        class="el-imgsa"
        :src="require('@/assets/imgs/omc/logo.png')"
      ></el-image>
      <el-menu
        router
        :default-active="activeMenu"
        class="el-menu-demo menuChange"
        mode="horizontal"
        background-color="#050825"
        text-color="#fff"
        active-text-color="#00B0F0"
      >
        <el-menu-item index="/home/omc">{{ $t("common.Omc") }}</el-menu-item>
        <el-menu-item index="/home/marketing">{{
          $t("common.Marketing")
        }}</el-menu-item>
        <el-menu-item index="/home/product">{{
          $t("common.Product")
        }}</el-menu-item>
        <el-menu-item index="/home/notice">{{
          $t("common.Notice")
        }}</el-menu-item>
      </el-menu>
      <div class="dropOne">
        <el-dropdown @command="clickLang">
          <span class="el-dropdown-link"
            >EN<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="en">English</el-dropdown-item>
            <el-dropdown-item command="zh">中文</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="footer_text1" v-if="caidan == 'true'">ID:{{ id }}</div>
      <div class="footer_text2" v-if="caidan == 'true'">UID:{{ uid }}</div>
      <div v-else>
        <div class="login cursor" @click="loginFn">
          {{ $t("login.LOGIN") }}
        </div>
        <div class="login cursor" style="right: 70px" @click="SIGNFns">
          {{ $t("register.SIGN") }}
        </div>
      </div>
      <div class="footer_menu" v-if="caidan == 'true'">
        <el-row class="tac">
          <el-menu
            router
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#050825"
            text-color="#fff"
          >
            <el-submenu index="1.1">
              <template slot="title">
                <span style="display: inline-block; width: 100px"></span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Account">{{
                  $t("user.Account")
                }}</el-menu-item>
                <el-menu-item index="/home/MyPonit">{{
                  $t("user.Point")
                }}</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="/home/Withdrawal">{{
                  $t("user.Withdrawal")
                }}</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="">
                <template slot="title">{{ $t("user.Buy") }}</template>
                <el-menu-item index="/home/CkmBuy" @click="ckmFn">{{
                  $t("user.CKM")
                }}</el-menu-item>
                <el-menu-item index="/home/NFTbuy" @click="NFTbuyFn">{{
                  $t("user.NFT")
                }}</el-menu-item>
                <el-menu-item index="/home/BUYPOINT" @click="BUYPOINTFn">{{
                  $t("user.Product")
                }}</el-menu-item>
              </el-submenu>
              <el-menu-item-group>
                <el-menu-item index="/home/BuyVoucher">{{
                  $t("user.Voucher")
                }}</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="/home/Transfer">{{
                  $t("user.Transfer")
                }}</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-7">
                <template slot="title">{{ $t("user.MyBoard") }}</template>
                <el-menu-item index="/home/MainBoard">{{
                  $t("user.Board")
                }}</el-menu-item>
                <el-menu-item index="/home/AvatarBoard">{{
                  $t("user.Avatar")
                }}</el-menu-item>
              </el-submenu>
              <el-menu-item-group>
                <el-menu-item index="/home/TotalMAP">{{
                  $t("user.MAP")
                }}</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item @click="indexFn" index="">{{
                  $t("user.logout")
                }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-row>
      </div>
    </header>
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
import { index } from "@/api/login.js"; // 登录接口
export default {
  name: "home",
  components: {},
  data() {
    return {
      caidan: false, // 菜单栏
      aside: "",
      activeIndex: "/home/omc",
      id: "", // id
      uid: "", // uid
      users: {
        user_id: "",
      },
      changeid: "0",
      changeTrue: 0,
      ckm_id: "", //ckm商品id
      nfc_id: "", //nfc商品id
      product_id: "", //product商品id
    };
  },
  computed: {
    // 我们使用计算属性来获取到当前点击的菜单的路由路径，然后设置default-active中的值
    // 使得菜单在载入时就能对应高亮
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
  created() {
    let heights = this.getViewPortWidth();
    this.caidan = sessionStorage.getItem("change");
    sessionStorage.setItem("heights", heights);
    if (this.caidan == false) {
      sessionStorage.removeItem("grade"); // id
      sessionStorage.removeItem("change"); // id
      sessionStorage.removeItem("id"); // id
      sessionStorage.removeItem("kid"); // id
      sessionStorage.removeItem("user_code"); // 用户账号
      sessionStorage.removeItem("ustd_address"); // ustd_address
      sessionStorage.removeItem("withdraw_money"); // 可提现金额（70%）
      sessionStorage.removeItem("shopping_money"); // 可购物金额（30%）
      sessionStorage.removeItem("omc_address"); // omc_address
      sessionStorage.removeItem("user_name"); // 用户名字
      sessionStorage.removeItem("code"); // //国家号码
      sessionStorage.removeItem("phone"); // //手机
      sessionStorage.removeItem("product_address_one"); // 产品地址1
      sessionStorage.removeItem("product_address_two"); // 产品地址2
      sessionStorage.removeItem("email"); // //email
      sessionStorage.removeItem("voucher_code"); // //16位推荐码
      sessionStorage.removeItem("type"); // //0非会员1会员
      sessionStorage.removeItem("grade"); // //用户账号
      sessionStorage.removeItem("country"); // //国家英语单词
    } else {
      this.users.user_id = sessionStorage.getItem("kid");
      this.index(this.users);
    }
  },
  mounted() {},
  methods: {
    ckmFn() {
      sessionStorage.setItem("oid", this.ckm_id);
    },
    NFTbuyFn() {
      sessionStorage.setItem("oid", this.nfc_id);
    },
    BUYPOINTFn() {
      sessionStorage.setItem("oid", this.product_id);
    },
    getViewPortWidth() {
      return (
        document.documentElement.clientHeight || document.body.clientHeight
      );
    },
    //  跳转到注册页
    SIGNFns() {
      this.$router.push({
        path: "/register",
      });
    },
    // 个人信息
    async index(query) {
      try {
        const data = await index(query);
        this.uid = data.data.id;
        console.log(data.data);
        this.id = data.data.user_code;
        this.ckm_id = data.data.ckm_id;
        this.nfc_id = data.data.nfc_id;
        this.product_id = data.data.product_id;

        sessionStorage.setItem("grade", data.data.grade); // grade
        sessionStorage.setItem("id", data.data.id); // id
        sessionStorage.setItem("withdraw_money", data.data.withdraw_money); // 可提现金额（70%）
        sessionStorage.setItem("ustd_address", data.data.ustd_address); // ustd_address
        sessionStorage.setItem(
          "product_address_one",
          data.data.product_address_one
        ); // 产品地址1
        sessionStorage.setItem(
          "product_address_two",
          data.data.product_address_two
        ); // 产品地址2
        sessionStorage.setItem("omc_address", data.data.omc_address); // omc_address
        sessionStorage.setItem("shopping_money", data.data.shopping_money); // 可购物金额（30%）
        sessionStorage.setItem("user_code", data.data.user_code); // 用户账号
        sessionStorage.setItem("user_name", data.data.user_name); // 用户名字
        sessionStorage.setItem("code", data.data.code); // //国家号码
        sessionStorage.setItem("phone", data.data.phone); // //手机
        sessionStorage.setItem("email", data.data.email); // //email
        sessionStorage.setItem("voucher_code", data.data.voucher_code); // //16位推荐码
        sessionStorage.setItem("type", data.data.type); // //0非会员1会员
        sessionStorage.setItem("grade", data.data.grade); // //用户账号
        sessionStorage.setItem("country", data.data.country); // //国家
      } catch (error) {
        console.log(error);
      }
    },
    // 点击跳转到登录页
    loginFn() {
      this.$router.push({
        path: "/login",
      });
    },
    indexFn() {
      // this.SIGNFn();
      // this.$router.go(0);
      console.log(9999999);
      sessionStorage.setItem("change", false);
      this.caidan = false;
      sessionStorage.removeItem("grade"); // id
      sessionStorage.removeItem("id"); // id
      sessionStorage.removeItem("kid"); // id
      sessionStorage.removeItem("user_code"); // 用户账号
      sessionStorage.removeItem("ustd_address"); // ustd_address
      sessionStorage.removeItem("withdraw_money"); // 可提现金额（70%）
      sessionStorage.removeItem("shopping_money"); // 可购物金额（30%）
      sessionStorage.removeItem("omc_address"); // omc_address
      sessionStorage.removeItem("user_name"); // 用户名字
      sessionStorage.removeItem("code"); // //国家号码
      sessionStorage.removeItem("phone"); // //手机
      sessionStorage.removeItem("product_address_one"); // 产品地址1
      sessionStorage.removeItem("product_address_two"); // 产品地址2
      sessionStorage.removeItem("email"); // //email
      sessionStorage.removeItem("voucher_code"); // //16位推荐码
      sessionStorage.removeItem("type"); // //0非会员1会员
      sessionStorage.removeItem("grade"); // //用户账号
      sessionStorage.removeItem("country"); // //国家英语单词

      console.log(sessionStorage.getItem("id"));
      this.$router.push({
        path: "/home/omc",
      });
    },
    // 语言切换
    clickLang(command) {
      console.log(command);
      this.$i18n.locale = command;
    },
  },
};
</script>

<style scoped>
.footer_menu {
  z-index: 9 !important;
}
.menuChange {
  width: "50%";
}
header {
  position: relative;
  width: 1920px;
  height: 158px;
  background: #050825;
}
::v-deep .el-submenu__title {
  height: 40px;
  font-size: 20px;
}
::v-deep .el-icon-arrow-down:before {
  font-size: 30px;
  padding-left: 10px;
  color: #fff;
}
::v-deep .el-image {
  display: inline-block;
}
.el-menu {
  border-right: 0;
  display: inline-block;
}
.el-imgsa {
  width: 230px;
  height: 88px;
  margin: 34px 144px 0 171px;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 20px;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}
::v-deep .el-submenu__icon-arrow .el-icon-arrow-down {
  display: inline-block;
  margin-left: 20px;
}
.dropOne {
  position: absolute;
  right: 474px;
  top: 88px;
}
.el-dropdown {
  width: 124px;
  height: 15px;
  display: inline-block;
  color: #fff;
  font-size: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 20px;
}
.login {
  position: absolute;
  top: 72px;
  right: 245px;
  width: 124px;
  display: inline-block;
  height: 50px;
  background: linear-gradient(90deg, #5f20d4 0%, #2e68f6 100%);
  box-shadow: 0px 5px 26px 1px rgba(164, 26, 26, 0.28);
  border-radius: 25px;
  font-size: 18px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
}
.footer {
  position: absolute;
  text-align: center;
  top: 72px;
  right: 91px;
  width: 124px;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(90deg, #5f20d4 0%, #2e68f6 100%);
  box-shadow: 0px 5px 26px 1px rgba(164, 26, 26, 0.28);
  border-radius: 25px;
}
.footer_text1 {
  position: absolute;
  top: 27px;
  right: 135px;
  width: 208px;
  font-size: 30px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
}
.footer_text2 {
  position: absolute;
  top: 65px;
  right: 135px;
  width: 208px;
  font-size: 30px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
}
.footer_menu {
  position: absolute;
  top: 110px;
  right: 180px;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
  text-decoration: none;
}
</style>